

<html>
<head>
{% load staticfiles %}
	<meta charset="UTF-8">
	<title>eFilm Panel Administración</title>
	<meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
	<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.1.0/animate.min.css" media="all" rel="stylesheet">
	
	
	<link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
	
	
	<link href="{% static 'LogOnThings/css/bootstrap-table.css' %}" media="all" rel="stylesheet">
	<link href="{% static 'LogOnThings/css/AdminLTE.css' %}" rel="stylesheet" type="text/css" />
	<link href="{% static 'LogOnThings/css/DragDrop.css' %}" type="text/css" rel="stylesheet" >
	<link href="{% static 'LoginThings/css/styles.css' %}" media="all" rel="stylesheet">

        <script>

		var estadoPestaniaPeliculas1900a1940 = 0;
		var estadoPestaniaPeliculas1941a1960 = 0;
		var estadoPestaniaPeliculas1961a1980 = 0;
		var estadoPestaniaPeliculas1981a2000 = 0;
		var estadoPestaniaPeliculas2000enAdelante = 0;



		window.onload = function(){
                document.getElementById("capaRegistroUsuario").style.display = "inline";
        		document.getElementById("capaUltimosUsuariosRegistrados").style.display = "inline";
        	}

        	function limpiarCamposRegistroUsuario(){

        		document.getElementById("email").value="";

        	}



       	function ocultarCapas(){

        		document.getElementById("capaRegistroUsuario").style.display = "none";
        		document.getElementById("capaUltimosUsuariosRegistrados").style.display = "none";
        		document.getElementById("capaRealizarIngreso").style.display = "none";
        		document.getElementById("capaSubirXML").style.display = "none";
        		document.getElementById("capaGestionarPeliculas").style.display = "none";
        		document.getElementById("capaUltimosXMLSubidos").style.display = "none";
        		document.getElementById("capaUltimosIngresosRealizados").style.display = "none";
        		document.getElementById("capaUltimosGestionesRealizadas").style.display = "none";
        	};



        	function ocultarCapasAlRegistroUsuario(){
        		ocultarCapas();
        		document.getElementById("capaRegistroUsuario").style.display = "inline";
        		document.getElementById("capaUltimosUsuariosRegistrados").style.display = "inline";

        	};

        	function ocultarCapasAlSubirXML(){
        		ocultarCapas();
        		document.getElementById("capaSubirXML").style.display = "inline";
        		document.getElementById("capaUltimosXMLSubidos").style.display = "inline";


        	};
        	function ocultarCapasAlRealizarIngreso(){
        		ocultarCapas();
        		document.getElementById("capaRealizarIngreso").style.display = "inline";
        		document.getElementById("capaUltimosIngresosRealizados").style.display = "inline";

        	};

        	function ocultarCapasAlGestionarPeliculas(){
        		ocultarCapas();
        		document.getElementById("capaGestionarPeliculas").style.display = "inline";
        		document.getElementById("capaUltimosGestionesRealizadas").style.display = "inline";


        	};



        	function ocultarPestanias(){

        	document.getElementById("pestaniaPeliculas1900a1940").style.display = "none";
        	document.getElementById("pestaniaPeliculas1941a1960").style.display = "none";
        	document.getElementById("pestaniaPeliculas1961a1980").style.display = "none";
        	document.getElementById("pestaniaPeliculas1981a2000").style.display = "none";
        	document.getElementById("pestaniaPeliculas2000enAdelante").style.display = "none";

        	};

        	function ocultarPestaniasAlMostrarPeliculasdesde1900a1940(){

        		ocultarPestanias();
        		if(estadoPestaniaPeliculas1900a1940 == 0){
        			document.getElementById("pestaniaPeliculas1900a1940").style.display = "inline";
        			estadoPestaniaPeliculas1900a1940 = 1;
        		}else{
        			document.getElementById("pestaniaPeliculas1900a1940").style.display = "none";
        			estadoPestaniaPeliculas1900a1940 = 0;
        		}

        	};

        	function ocultarPestaniasAlMostrarPeliculasdesde1941a1960(){

        		ocultarPestanias();
        		if(estadoPestaniaPeliculas1941a1960==0){
        			document.getElementById("pestaniaPeliculas1941a1960").style.display = "inline";
					estadoPestaniaPeliculas1941a1960 = 1;
				}else{
					document.getElementById("pestaniaPeliculas1941a1960").style.display = "none";
					estadoPestaniaPeliculas1941a1960 = 0;
				}

        	};

        	function ocultarPestaniasAlMostrarPeliculasdesde1961a1980(){

        		ocultarPestanias();
        		if(estadoPestaniaPeliculas1961a1980 == 0){
        			document.getElementById("pestaniaPeliculas1961a1980").style.display = "inline";
        			estadoPestaniaPeliculas1961a1980 = 1;
        		}else{
        			document.getElementById("pestaniaPeliculas1961a1980").style.display = "none";
        			estadoPestaniaPeliculas1961a1980 = 0;
        		}

        	};

        	function ocultarPestaniasAlMostrarPeliculasdesde1981a2000(){

        	    ocultarPestanias();
        	    if(estadoPestaniaPeliculas1981a2000 == 0){
        			document.getElementById("pestaniaPeliculas1981a2000").style.display = "inline";
        			estadoPestaniaPeliculas1981a2000 = 1;
        		}else{
        			document.getElementById("pestaniaPeliculas1981a2000").style.display = "none";
        			estadoPestaniaPeliculas1981a2000 = 0;
        		}

        	};

        	function ocultarPestaniasAlMostrarPeliculasdesde2000enAdelante(){

        	    ocultarPestanias();
        	    if(estadoPestaniaPeliculas2000enAdelante == 0){
        			document.getElementById("pestaniaPeliculas2000enAdelante").style.display = "inline";
        			estadoPestaniaPeliculas2000enAdelante = 1;
        		}else{
					document.getElementById("pestaniaPeliculas2000enAdelante").style.display = "none";
        			estadoPestaniaPeliculas2000enAdelante = 0;
        		}

        	};







        </script>




    </head>
    <body class="skin-blue">
    	<!-- header logo: style can be found in header.less -->
    	<header class="header">
    		<a href="{% url 'monster' %}" class="logo">
    			<!-- Add the class icon to your logo image or logo icon to add the margining -->
    			eFilm
    		</a>
    		<!-- Header Navbar: style can be found in header.less -->
    		<nav class="navbar navbar-static-top" role="navigation">
    			<!-- Sidebar toggle button-->

    			<div class="navbar-right">


                    <ul class="nav navbar-nav">
                        <!-- Messages: style can be found in dropdown.less-->
                        <li class="dropdown messages-menu" onclick="ocultarCapasAlRegistroUsuario()">
                            <a data-toggle="dropdown" class="dropdown-toggle" href="#">
                                <i class="fa fa-envelope">New Users</i>
                                <span class="label label-success">{{ UsuariosRegistrados.count }}</span>
                            </a>

                        </li>
                        <!-- Notifications: style can be found in dropdown.less -->
                        <li class="dropdown notifications-menu" onclick="ocultarCapasAlRealizarIngreso()">
                            <a data-toggle="dropdown" class="dropdown-toggle" href="#">

                                <i class="fa fa-warning">Ingresos</i>
                                <span class="label label-warning">10</span>
                            </a>

                        </li>
                        <!-- Tasks: style can be found in dropdown.less -->
                        <li class="dropdown tasks-menu" onclick="ocultarCapasAlGestionarPeliculas()">
                            <a data-toggle="dropdown" class="dropdown-toggle" href="#">
                                <i class="fa fa-tasks">Nuevas pelis</i>
                                <span class="label label-danger">{{UltimasPeliculasSubidas.count}}</span>
                            </a>

                        </li>
                        <!-- User Account: style can be found in dropdown.less -->
                        <li class="dropdown user user-menu">
                            <a data-toggle="dropdown" class="dropdown-toggle" href="#">
                                <i class="glyphicon glyphicon-user"></i>
                                <span> {{user.username}} {{ user.last_name }} <i class="caret"></i></span>
                            </a>
                            <ul class="dropdown-menu">
                                <li class="user-footer">
                                    <div class="pull-left">
                                        <a class="btn btn-default btn-flat" href="#">Profile</a>
                                    </div>
                                    <div class="pull-right">
                                        <a class="btn btn-default btn-flat" href="#">Sign out</a>
                                    </div>
                                </li>
                            </ul>
                        </li>
                    </ul>


    			</div>
    		</nav>
    	</header>
    	<div class="wrapper row-offcanvas row-offcanvas-left">
    		<!-- Left side column. contains the logo and sidebar -->
    		<aside class="left-side sidebar-offcanvas">
    			<!-- sidebar: style can be found in sidebar.less -->
    			<section class="sidebar">
    				<!-- Sidebar user panel -->
    				<div class="user-panel">
    					<div class="pull-left image">
    						<img src="/static/LogOnThings/img/avatar3.png" class="img-circle" alt="User Image" />
    					</div>
    					<div class="pull-left info">

							<p>Hola {{ user.username }}</p>

							<a href="#"><i class="fa fa-circle text-success"></i> Logeado</a>
    					</div>
    				</div>
    				<!-- search form -->

    				<!-- /.search form -->
    				<!-- sidebar menu: : style can be found in sidebar.less -->
    				<ul class="sidebar-menu">
    					<li onclick="ocultarCapasAlRegistroUsuario()" class="active">
    						<a>
    							<i class="fa fa-dashboard"></i> <span>Registrar Usuario</span>
    						</a>
    					</li>
    					<li onclick="ocultarCapasAlSubirXML()">
    						<a>
    							<i class="fa fa-th"></i> <span>Subir xml</span> <small class="badge pull-right bg-green">new</small>
    						</a>
    					</li>
    					<li onclick="ocultarCapasAlRealizarIngreso()" class="treeview">
    						<a>
    							<i class="fa fa-bar-chart-o"></i>
    							<span>Realizar Ingreso</span>
    							<i class="fa fa-angle-left pull-right"></i>
    						</a>

    					</li>
    					<li onclick="ocultarCapasAlGestionarPeliculas()" class="treeview">
    						<a>
    							<i class="fa fa-laptop"></i>
    							<span>Gestionar Peliculas</span>
    							<i class="fa fa-angle-left pull-right"></i>
    						</a>

    					</li>
                        <li class="treeview">

    							<i class="fa fa-laptop"></i>


                                     <a href="{% url 'logout' %}">Salir</a>


    							<i class="fa fa-angle-left pull-right"></i>


    					</li>


    				</ul>
    			</section>
    			<!-- /.sidebar -->
    		</aside>

    		<aside class="right-side">
    			<!-- Content Header (Page header) -->
    			<section class="content-header">
    				<h1>
    					Panel de administración
    				</h1>

    			</section>

    			<section class="content">

    				<div class="row">
    					<section class="col-lg-7 connectedSortable">

    						<div id="capaRegistroUsuario">
    							<div class="box box-solid bg-light-blue-gradient">
    								<div class="box-header">
    									<div class="pull-right box-tools">
    									</div>
    									<i class=""></i>
    									<h3 class="box-title">
    										Registro de usuarios
    									</h3>
    								</div>
    								<div class="box-body">
    									<div id="" style="height: auto;">
    										<form class="form animate-form" id="form" onsubmit="return false;">
    											<div class="form-group has-feedback">
    												<label class="control-label sr-only" for="email">Correo Electrónico</label>
    												<div class="input-group-addon">
    													<div class="glyphicon glyphicon-envelope"></div>
    												</div>
    												<input class="form-control" id="email" name="email" placeholder="Correo Electrónico" type="text"><span class="glyphicon glyphicon-ok form-control-feedback"></span>
    											</div>
    											<div class="form-group submit">
    												<input class="btn btn-lg" type="submit" value="ENVIAR" >
    											</div>
    										</form>
    									</div>
    								</div>
    							</div>
    						</div>

    						<div id="capaSubirXML">
    							<div class="box box-solid bg-light-blue-gradient">
    								<div class="box-header">
    									<i class="fa fa-th"></i>
    									<h3 class="box-title">Subir XML</h3>
    									<div class="box-tools pull-right">

    									</div>
    								</div>
    								<div class="box-body border-radius-none">
    									<div class="chart" id="line-chart" style="height:auto;">

    										<div id="subirXML" style="visibility: visible;">

    											<div id="byte_content"></div>
    											<div id="byte_range"></div>
    											<div id="uploads"></div>
    											<div class="dropzone" id="dropzone">Arrastra hasta aquí el fichero .xml</div>

    											<div id="seleccionArchivoXml">


                                                         <div class="">
                                                            <input id="files" type="file" class="filestyle" name="files[]" data-buttonname="btn-primary" id="filestyle-3" tabindex="-1" style="position: absolute; clip: rect(0px 0px 0px 0px);">
                                                                <div class="bootstrap-filestyle input-group"></div>

                                                        </div>


    												<output id="list"></output>

    												<script>
    													function handleFileSelect(evt) {

    														var file = evt.target.files[0];
    														loadXMLDoc(file);

    													}

    													document.getElementById('files').addEventListener('change', handleFileSelect, false);
    												</script>

    											</div>


    											<script type="text/javascript">

    												function loadXMLDoc(file){

    													var start = 0;
    													var stop = file.size-1;
    													var reader = new FileReader();
    													var text;
    													reader.onloadend = function(evt){
    														if(evt.target.readyState == FileReader.DONE){

    															['Read bytes: ', start + 1, ' - ', stop + 1,
    															' of ', file.size, ' byte file'].join('');
    															text = reader.result;
    															console.log(text);
                                                                window.alert("El fichero se ha subido correctamente");
    														}
    													};

    													var blob = file.slice(start, stop+1);
    													reader.readAsBinaryString(blob);

    												}

    												(function(){
    													var dropzone = document.getElementById('dropzone');

                    //cuando tenemos la informacion del archivo en ondrop lo manejamos en esta funcion
                    var upload = function(files){

                    	if(files[0].type == "text/xml"){
                    		console.log("Es un xml");
                    		var xmlDoc = loadXMLDoc(files[0]);


                    	}else{
                    		window.alert("El fichero no es de formato .xml");
                    		consele.log("Es un fichero no valido");
                    	}


                    }

                    //que pasa al soltar un archivo en la zona drag&drop
                    dropzone.ondrop = function(e){
                        e.preventDefault();//Esto lo hace que no se ejecute ninguna accion al soltar el archivo, si es una imagen x defecto se muestra
                        this.className = 'dropzone'; //cambiamos el css al dejar el archivo, asi queda como al inicio
                        console.log(e.dataTransfer.files);//con esto mostramos por consola la informacion del fichero subido para poder manejarlo
                        upload(e.dataTransfer.files);
                    };


                    //aqui lo que hacemos es que al arrastrar el fichero dentro de la zona cambiamos el css para que salgan las líneas negras oscuras
                    dropzone.ondragover = function(){
                    	this.className = 'dropzone dragover';
                    	return false;
                    };

                    //aquí cuando dejamos un de tener el fichero en la dona de drag&drop cambiamos los css otra vez
                    dropzone.ondragleave = function(){
                    	this.className = 'dropzone';
                    	return false;
                    };

                }());

</script>

<script>

										function elegirEstiloFilaTablaPeliculas(contador, idTR){

											var estilo = "";
											switch(contador){

											case 1:
												estilo = "active";
												break;
											case 2:
												estilo =  "success";
												break;
											case 3:
												estilo =  "info"
												break;
											case 4:
												estilo = "warning";
												break;
											case 5:
												estilo =  "danger";
												break;
											}
											var element = document.getElementById(idTR)
											element.setAttribute('class', estilo);

										};

										function incrementarContador(contador){

											if(contador<5)
												contador++;
											else
												contador=1;
											return contador;

										};


										function rowStyle(row, index) {
											var classes = ['active', 'success', 'info', 'warning', 'danger'];

											if (index % 2 === 0 && index / 2 < classes.length) {
												return {
													classes: classes[index / 2]
												};
											}
											return {};
										};
</script>

</div>


</div>
</div>
</div>
</div>




<div id="capaRealizarIngreso">
	<div class="box box-solid bg-light-blue-gradient">
		<div class="box-header">
			<i class="fa fa-th"></i>
			<h3 class="box-title">Realizar ingreso</h3>

		</div>
		<div class="box-body border-radius-none">
			<div class="chart" id="line-chart" style="height: auto;">

				<form class="form animate-form" id="IngresoForm"  action="" method="POST">{% csrf_token %}
					<div class="form-group has-feedback">
						<label class="control-label sr-only" for="email">Correo Electrónico</label>
						<div class="input-group-addon">
							<div class="glyphicon glyphicon-euro"></div>
						</div>
						<input class="form-control" id="ingreso" name="ingreso" placeholder="Realiza un ingreso" type="number"><span class="glyphicon glyphicon-ok form-control-feedback"></span>
					</div>
					<div class="form-group submit">
						<input class="btn btn-lg" type="submit" value="Realizar ingreso" >
					</div>
				</form>

			</div>
		</div>

	</div>
</div>

<div>



</div>

<div id="capaGestionarPeliculas">

	<div class="box box-solid bg-light-blue-gradient">
		<div class="box-header">
			<i class="fa fa-th"></i>
			<h3 class="box-title">GestionarPeliculas</h3>

		</div>
		<div class="box-body border-radius-none" style="padding:30px">
			<div class="chart" id="line-chart" style="height: auto;">




				<div class="bs-example">






						<div class="panel panel-primary">
						  <div class="panel-heading" onclick="ocultarPestaniasAlMostrarPeliculasdesde1900a1940()">
							<h3 class="panel-title">Películas de 1900 a 1940</h3>
						  </div>
						  <div id="pestaniaPeliculas1900a1940" >
							<div  class="panel-body">

								<div class="bs-example" style="max-height:250; overflow-y:scroll">
									<div class="bootstrap-table">
										<div class="fixed-table-toolbar"></div>
										<div class="fixed-table-container" style="height: 250px; padding-bottom: 37px;">
											<div class="fixed-table-header" style="height: 37px; border-bottom: 1px solid rgb(221, 221, 221); margin-right: 0px;">
												<table style="width: 100%;" class="table table-hover">
													<thead>
														<tr>
															<th class="" style="width:16%;">
																<div class="th-inner ">ID</div>
																<div class="fht-cell" style="width:10%;"></div>
															</th>
															<th class="" style="width:68%;">
																<div class="th-inner ">
																	<i class="glyphicon glyphicon-star"></i>
																		Título
																</div>
																<div class="fht-cell" style="width:80%;"></div>
															</th>
															<th class="" style="width:16%;">
																<div class="th-inner ">
																	<i class="glyphicon glyphicon glyphicon-check"></i>

																</div>
																<div class="fht-cell" style="width:10%;"></div>
															</th>
														</tr>
													</thead>
												</table>
											</div>
											<div class="fixed-table-body">
												<div class="fixed-table-loading" style="top: 37px; display: none;">Loading, please wait…</div>
												<table style="width: 100%;" data-row-style="rowStyle" data-height="400" data-url="data1.json" id="table-style" class="table table-hover">

													<tbody>




													<script>
														var contadorTotalPeliculas = 1;
														var contadorEstiloPeliculas1900a1940 = 1;
														var estiloFila = "";
													</script>

													{% for p in UltimasPeliculasSubidas %}
								  						{% if  p.year >= 1900 and p.year <= 1940 %}

															<tr id="{{p.id}}" style="width: 100%;" data-index="{{p.id}}" >
																<script>
																	elegirEstiloFilaTablaPeliculas(contadorEstiloPeliculas1900a1940, {{p.id}});
																	contadorEstiloPeliculas1900a1940 = incrementarContador(contadorEstiloPeliculas1900a1940);
																	contadorTotalPeliculas ++;
																</script>
																<td style="width:16.75%">

																</td>
																<td style="width:69%">{{p.title}}</td>
																<td style="width:13%">
																	<input type="checkbox" id="{{p.title}}">
																</td>
															</tr>

														{% endif %}

							  						{% endfor %}

													</tbody>
												</table>
											</div>
											<div class="fixed-table-pagination">

											</div>
										</div>
									</div>
									<div class="clearfix"></div>

								</div>



								<!--<div style="max-height:150; overflow-y:scroll">

									<table style="width:100%">
										<thead>
											<tr>
												<th>Título</th>
												<th>Seleccionar</th>
											</tr>
										</thead>
										<tbody style="overflow-y:scroll">
										{% for p in UltimasPeliculasSubidas %}
								  		{% if  p.year >= 1900 and p.year <= 1940 %}
											<tr>
												<td><p style="color:red">{{p.title}}</p></td>
												<td><input type="checkbox" id="{{p.title}}"> </td>
											</tr>
										{% endif %}
							  			{% endfor %}
										</tbody>
									</table>

								</div>-->

						  </div>
							</div>

						</div>








						<div class="panel panel-success" onclick="ocultarPestaniasAlMostrarPeliculasdesde1941a1960()">

						  <div class="panel-heading">
							<h3 class="panel-title">Películas de 1941 a 1960</h3>
						  </div>
						  <div id="pestaniaPeliculas1941a1960">

							  <div  class="panel-body">

								<div class="bs-example" style="max-height:250; overflow-y:scroll">
									<div class="bootstrap-table">
										<div class="fixed-table-toolbar"></div>
										<div class="fixed-table-container" style="height: 250px; padding-bottom: 37px;">
											<div class="fixed-table-header" style="height: 37px; border-bottom: 1px solid rgb(221, 221, 221); margin-right: 0px;">
												<table style="width: 100%;" class="table table-hover">
													<thead>
														<tr>
															<th class="" style="width:16%;">
																<div class="th-inner ">ID</div>
																<div class="fht-cell" style="width:10%;"></div>
															</th>
															<th class="" style="width:68%;">
																<div class="th-inner ">
																	<i class="glyphicon glyphicon-star"></i>
																		Título
																</div>
																<div class="fht-cell" style="width:80%;"></div>
															</th>
															<th class="" style="width:16%;">
																<div class="th-inner ">
																	<i class="glyphicon glyphicon glyphicon-check"></i>

																</div>
																<div class="fht-cell" style="width:10%;"></div>
															</th>
														</tr>
													</thead>
												</table>
											</div>
											<div class="fixed-table-body">
												<div class="fixed-table-loading" style="top: 37px; display: none;">Loading, please wait…</div>
												<table style="width: 100%;" data-row-style="rowStyle" data-height="400" data-url="data1.json" id="table-style" class="table table-hover">

													<tbody>




													<script>
														var contadorTotalPeliculas = 1;
														var contadorEstiloPeliculas1941a1960 = 1;
														var estiloFila = "";
													</script>

													{% for p in UltimasPeliculasSubidas %}
								  						{% if  p.year >= 1941 and p.year <= 1960 %}

															<tr id="{{p.id}}" style="width: 100%;" data-index="{{p.id}}" >
																<script>
																	elegirEstiloFilaTablaPeliculas(contadorEstiloPeliculas1941a1960, {{p.id}});
																	contadorEstiloPeliculas1941a1960 = incrementarContador(contadorEstiloPeliculas1941a1960);
																	contadorTotalPeliculas ++;
																</script>
																<td style="width:16.75%">

																</td>
																<td style="width:69%">{{p.title}}</td>
																<td style="width:13%">
																	<input type="checkbox" id="{{p.title}}">
																</td>
															</tr>

														{% endif %}

							  						{% endfor %}

													</tbody>
												</table>
											</div>
											<div class="fixed-table-pagination">

											</div>
										</div>
									</div>
									<div class="clearfix"></div>

								</div>
								</div>


							 <!--
								{% for p in UltimasPeliculasSubidas %}

								  {% if p.year >= 1941 and p.year <= 1960%}


										  <p style="color:red">{{p.title}}</p>


								  {% endif %}
							  	{% endfor %}

							  	-->














						  </div>
						</div>

						<div class="panel panel-info" onclick="ocultarPestaniasAlMostrarPeliculasdesde1961a1980()">
						  <div class="panel-heading">
							<h3 class="panel-title">Películas 1961 a 1980</h3>
						  </div>
						  <div id="pestaniaPeliculas1961a1980">





							  <div  class="panel-body">




								<div class="bs-example" style="max-height:250; overflow-y:scroll">
									<div class="bootstrap-table">
										<div class="fixed-table-toolbar"></div>
										<div class="fixed-table-container" style="height: 250px; padding-bottom: 37px;">
											<div class="fixed-table-header" style="height: 37px; border-bottom: 1px solid rgb(221, 221, 221); margin-right: 0px;">
												<table style="width: 100%;" class="table table-hover">
													<thead>
														<tr>
															<th class="" style="width:16%;">
																<div class="th-inner ">ID</div>
																<div class="fht-cell" style="width:10%;"></div>
															</th>
															<th class="" style="width:68%;">
																<div class="th-inner ">
																	<i class="glyphicon glyphicon-star"></i>
																		Título
																</div>
																<div class="fht-cell" style="width:80%;"></div>
															</th>
															<th class="" style="width:16%;">
																<div class="th-inner ">
																	<i class="glyphicon glyphicon glyphicon-check"></i>

																</div>
																<div class="fht-cell" style="width:10%;"></div>
															</th>
														</tr>
													</thead>
												</table>
											</div>
											<div class="fixed-table-body">
												<div class="fixed-table-loading" style="top: 37px; display: none;">Loading, please wait…</div>
												<table style="width: 100%;" data-row-style="rowStyle" data-height="400" data-url="data1.json" id="table-style" class="table table-hover">

													<tbody>




													<script>
														var contadorTotalPeliculas = 1;
														var contadorEstiloPeliculas1961a1980 = 1;
														var estiloFila = "";
													</script>

													{% for p in UltimasPeliculasSubidas %}
								  						{% if  p.year >= 1961 and p.year <= 1980 %}

															<tr id="{{p.id}}" style="width: 100%;" data-index="{{p.id}}" >
																<script>
																	elegirEstiloFilaTablaPeliculas(contadorEstiloPeliculas1961a1980, {{p.id}});
																	contadorEstiloPeliculas1961a1980 = incrementarContador(contadorEstiloPeliculas1961a1980);
																	contadorTotalPeliculas ++;
																</script>
																<td style="width:16.75%">

																</td>
																<td style="width:69%">{{p.title}}</td>
																<td style="width:13%">
																	<input type="checkbox" id="{{p.title}}">
																</td>
															</tr>

														{% endif %}

							  						{% endfor %}

													</tbody>
												</table>
											</div>
											<div class="fixed-table-pagination">

											</div>
										</div>
									</div>
									<div class="clearfix"></div>

								</div>
</div>








							  <!--
								{% for p in UltimasPeliculasSubidas %}

								  {% if p.year >= 1961 and p.year <= 1980%}


										  <p style="color:red">{{p.title}}</p>


								  {% endif %}
							  	{% endfor %}
								-->


						  </div>
						</div>
						<div class="panel panel-warning" onclick="ocultarPestaniasAlMostrarPeliculasdesde1981a2000()">
						  <div class="panel-heading">
							<h3 class="panel-title">Películas de 1981 a 2000</h3>
						  </div>
						  <div id="pestaniaPeliculas1981a2000">




							  <div  class="panel-body">




								<div class="bs-example" style="max-height:250; overflow-y:scroll">
									<div class="bootstrap-table">
										<div class="fixed-table-toolbar"></div>
										<div class="fixed-table-container" style="height: 250px; padding-bottom: 37px;">
											<div class="fixed-table-header" style="height: 37px; border-bottom: 1px solid rgb(221, 221, 221); margin-right: 0px;">
												<table style="width: 100%;" class="table table-hover">
													<thead>
														<tr>
															<th class="" style="width:16%;">
																<div class="th-inner ">ID</div>
																<div class="fht-cell" style="width:10%;"></div>
															</th>
															<th class="" style="width:68%;">
																<div class="th-inner ">
																	<i class="glyphicon glyphicon-star"></i>
																		Título
																</div>
																<div class="fht-cell" style="width:80%;"></div>
															</th>
															<th class="" style="width:16%;">
																<div class="th-inner ">
																	<i class="glyphicon glyphicon glyphicon-check"></i>

																</div>
																<div class="fht-cell" style="width:10%;"></div>
															</th>
														</tr>
													</thead>
												</table>
											</div>
											<div class="fixed-table-body">
												<div class="fixed-table-loading" style="top: 37px; display: none;">Loading, please wait…</div>
												<table style="width: 100%;" data-row-style="rowStyle" data-height="400" data-url="data1.json" id="table-style" class="table table-hover">

													<tbody>




													<script>
														var contadorTotalPeliculas = 1;
														var contadorEstiloPeliculas1981a2000 = 1;
														var estiloFila = "";
													</script>

													{% for p in UltimasPeliculasSubidas %}
								  						{% if  p.year >= 1981 and p.year <= 2000 %}

															<tr id="{{p.id}}" style="width: 100%;" data-index="{{p.id}}" >
																<script>
																	elegirEstiloFilaTablaPeliculas(contadorEstiloPeliculas1981a2000, {{p.id}});
																	contadorEstiloPeliculas1981a2000 = incrementarContador(contadorEstiloPeliculas1981a2000);
																	contadorTotalPeliculas ++;
																</script>
																<td style="width:16.75%">

																</td>
																<td style="width:69%">{{p.title}}</td>
																<td style="width:13%">
																	<input type="checkbox" id="{{p.title}}">
																</td>
															</tr>

														{% endif %}

							  						{% endfor %}

													</tbody>
												</table>
											</div>
											<div class="fixed-table-pagination">

											</div>
										</div>
									</div>
									<div class="clearfix"></div>

								</div>
</div>







							  <!--
								{% for p in UltimasPeliculasSubidas %}

								  {% if p.year >= 1981 and p.year <= 2000%}


										  <p style="color:red">{{p.title}}</p>


								  {% endif %}
							  	{% endfor %}

								-->


						  </div>
						</div>
						<div class="panel panel-danger" onclick="ocultarPestaniasAlMostrarPeliculasdesde2000enAdelante()">
						  <div class="panel-heading">
							<h3 class="panel-title">Películas de 2001 en adelante</h3>
						  </div>
						  <div id="pestaniaPeliculas2000enAdelante">



							  <div  class="panel-body">




								<div class="bs-example" style="max-height:250; overflow-y:scroll">
									<div class="bootstrap-table">
										<div class="fixed-table-toolbar"></div>
										<div class="fixed-table-container" style="height: 250px; padding-bottom: 37px;">
											<div class="fixed-table-header" style="height: 37px; border-bottom: 1px solid rgb(221, 221, 221); margin-right: 0px;">
												<table style="width: 100%;" class="table table-hover">
													<thead>
														<tr>
															<th class="" style="width:16%;">
																<div class="th-inner ">ID</div>
																<div class="fht-cell" style="width:10%;"></div>
															</th>
															<th class="" style="width:68%;">
																<div class="th-inner ">
																	<i class="glyphicon glyphicon-star"></i>
																		Título
																</div>
																<div class="fht-cell" style="width:80%;"></div>
															</th>
															<th class="" style="width:16%;">
																<div class="th-inner ">
																	<i class="glyphicon glyphicon glyphicon-check"></i>

																</div>
																<div class="fht-cell" style="width:10%;"></div>
															</th>
														</tr>
													</thead>
												</table>
											</div>
											<div class="fixed-table-body">
												<div class="fixed-table-loading" style="top: 37px; display: none;">Loading, please wait…</div>
												<table style="width: 100%;" data-row-style="rowStyle" data-height="400" data-url="data1.json" id="table-style" class="table table-hover">

													<tbody>




													<script>
														var contadorTotalPeliculas = 1;
														var contadorEstiloPeliculasDe2000EnAdelante = 1;
														var estiloFila = "";
													</script>

													{% for p in UltimasPeliculasSubidas %}
								  						{% if p.year > 2000 %}

															<tr id="{{p.id}}" style="width: 100%;" data-index="{{p.id}}" >
																<script>
																	elegirEstiloFilaTablaPeliculas(contadorEstiloPeliculasDe2000EnAdelante, {{p.id}});
																	contadorEstiloPeliculasDe2000EnAdelante = incrementarContador(contadorEstiloPeliculasDe2000EnAdelante);
																	contadorTotalPeliculas ++;
																</script>
																<td style="width:16.75%">

																</td>
																<td style="width:69%">{{p.title}}</td>
																<td style="width:13%">
																	<input type="checkbox" id="{{p.title}}">
																</td>
															</tr>

														{% endif %}

							  						{% endfor %}

													</tbody>
												</table>
											</div>
											<div class="fixed-table-pagination">

											</div>
										</div>
									</div>
									<div class="clearfix"></div>

								</div>
</div>





							  <!--
								{% for p in UltimasPeliculasSubidas %}

								  {% if p.year > 2000 %}

								  	<p style="color:red">
										  {{p.title}}</p>


								  {% endif %}
							  	{% endfor %}
							  	-->



						  </div>
						</div>
					</div>





			</div>
		</div>
	</div>
</div>

</section><!-- /.Left col -->
<!-- right col (We are only adding the ID to make the widgets sortable)-->
<section class="col-lg-5 connectedSortable">

	<div id="capaUltimosUsuariosRegistrados">
		<div class="box box-solid bg-teal-gradient">
			<div class="box-header">
				<i class="fa fa-th"></i>
				<h3 class="box-title">Últimos usuarios registrados</h3>
			</div>
			<div class="box-body border-radius-none" style="padding:30px">
				<div class="chart" id="line-chart" style="height: auto;">

						<div class="panel panel-primary">

							<div class="panel-heading">Ultimos usuarios</div>

								<table class="table">
									{% for u in UsuariosRegistrados %}
										<tr>
											<td>{{ u.nombre }}</td>
											<td>
												<input type="checkbox">
											</td>
										</tr>
									{% endfor %}
								</table>
						</div>


				</div>
			</div><!-- /.box-body -->
		</div>
	</div>


		<div id="capaUltimosXMLSubidos">
		<div class="box box-solid bg-teal-gradient">
			<div class="box-header">
				<i class="fa fa-th"></i>
				<h3 class="box-title">Últimos xml subidos</h3>

			</div>
			<div class="box-body border-radius-none" style="padding:30px">
				<div class="chart" id="line-chart" style="height: auto;">


				</div>
			</div><!-- /.box-body --></div>
		</div>

		<div id="capaUltimosIngresosRealizados">
		<div class="box box-solid bg-teal-gradient">
			<div class="box-header">
				<i class="fa fa-th"></i>
				<h3 class="box-title">Últimos ingresos realizados</h3>

			</div>
			<div class="box-body border-radius-none">
				<div class="chart" id="line-chart" style="height: auto;">
					{% for s in SaldoBiblioteca %}

						<p>El saldo de la biblioteca es: {{s.dineroIngresado}}</p>

					{% endfor %}
				</div>
			</div><!-- /.box-body --></div>
		</div>

		<div id="capaUltimosGestionesRealizadas">
		<div class="box box-solid bg-teal-gradient">
			<div class="box-header">
				<i class="fa fa-th"></i>
				<h3 class="box-title">Últimas gestiones realizadas</h3>

			</div>
			<div class="box-body border-radius-none">
				<div class="chart" id="line-chart" style="height: auto;"></div>
			</div><!-- /.box-body --></div>
		</div>



	</section><!-- right col -->
</div><!-- /.row (main row) -->

</section><!-- /.content -->
</aside><!-- /.right-side -->
</div><!-- ./wrapper -->

		
		<script src="{% static 'LoginThings/js/jquery.validation.js' %}"></script>
        <script src="{% static 'LoginThings/js/messages_es.js' %}"></script>
        <script src="{% static 'LoginThings/js/main.js' %}"></script>
		<script src="{% static 'LogOnThings/js/bootstrap-table.js' %}"></script>
		<script src="{% static 'LoginThings/js/bootstrap-filestyle.min.js' %}"></script>




    <!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>-->
<!--script src="LoginThings/js/bootstrap.min.js"></script>-->
    

    </body>
    </html>






